<template>
  <div>
    <div
      id="box"
      contentEditable
    >我是p标签的内容</div>
    <button
      id="saveBtn"
      @click="x"
    >记录光标位置</button>
    <button id="restoreBtn">恢复光标位置</button>
  </div>
</template>
<script>
export default {
  data: () => ({
    range: null
  }),
  methods: {
    x(){
      
    }
    saveSelection() {
      if (window.getSelection) {
        const sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
          return sel.getRangeAt(0);
        }
      } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
      }
      return null;
    },
    restoreSelection(range) {
      if (range) {
        if (window.getSelection) {
          const sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
        } else if (document.selection && range.select) {
          range.select();
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>